<template>
  <el-card
    class="card-container"
    :class="showBody ? '' : 'hidden-body'"
    shadow="never"
  >
    <template v-if="title" #header>
      <div class="card-header">
        <span class="card_title">
          {{ title }}
          <span class="card_title--subtitle" v-if="subTitle">
            {{ subTitle }}
          </span>
          <el-tooltip
            v-if="showTooltip"
            placement="right"
            effect="light"
            trigger="hover"
          >
            <template #content>
              <div
                class="w-[449px] leading-[22px] py-[19px] px-[13px] box-border text-[#666] text-[14px]"
              >
                {{ tooltipText }}
              </div>
            </template>
            <svg
              class="icon mr-[6px] ml-1 cursor-pointer"
              aria-hidden="true"
              style="width: 14px; height: 14px"
            >
              <use xlink:href="#icon-a-15"></use>
            </svg>
            <!-- <span class="ml-1 cursor-pointer icon-bangzhuzhongxin iconfont"></span> -->
          </el-tooltip>
        </span>
        <slot name="subTitle"></slot>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>
<script lang="ts" setup>
interface IProps {
  title?: string
  subTitle?: string
  showTooltip?: boolean
  tooltipText?: string
  showBody?: boolean
}
withDefaults(defineProps<IProps>(), {
  showTooltip: false,
  tooltipText: '',
  showBody: true
})
</script>

<style lang="scss" scoped>
.hidden-body {
  :deep(.el-card__body) {
    display: none;
  }
}
:deep(.el-card) {
  @apply rounded-[10px];
}
.card-container {
  border: none !important;
  height: auto;
  @apply rounded-[10px];
  :deep(.el-card__header) {
    @apply border-none text-[16px] text-black;
    padding: 17px 17px 16px;
  }
  :deep(.el-card__body) {
    border-top: 1px solid #f6f6f6;
    padding: 20px 25px 20px;
    height: 100%;
    flex: 1;
  }
  .card-header {
    @apply flex items-center;
    line-height: 22px;
  }
  .card_title {
    @apply relative text-[14px] font-semibold pl-[11px];
    &--subtitle {
      @apply font-normal text-[12px] text-[#333] ml-4;
    }
    &::before {
      @apply absolute left-0 top-0 bottom-0;
      content: '';
      width: 3px;
      height: 14px;
      border-radius: 1.5px;
      background-color: #1562fc;
      margin: auto;
    }
  }
}
</style>
